<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<table>
    <caption>用户注册</caption>
    <tr>
        <td>用户名：</td>
        <td><input type="text" id="username" onkeyup="checkUsername()"><span id="usernameMsg"></span></td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="text" id="password"></td>
    </tr>
</table>
<button id="regButton">注册用户</button>
</body>
<script>
    $(function (){
        $("#regButton").click(function (){
            let username = $("#username").val();
            let password = $("#password").val();
            $.ajax({                    // 标准化模板，不用死记
                url:"/registerUserServlet",   // 请求路径
                type:"post",            // 请求的方式，不区分大小写
                async:true,             // 是否异步，true是默认值，false为同步请求
                cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                data:{                  // 传递给后台参数名和参数值
                    username:username,
                    password:password,
                },
                success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                    console.log(response);
                    if (response.code==200){
                        alert(response.msg);
                        window.location.href="login.html";
                    }
                    else {
                        alert(response.msg);
                    }
                },
                error:function(response){          // 如果请求失败，则会执行error函数
                    alert("出错" + response);
                }
            });
        });
    });

    function checkUsername(){
        var username = document.getElementById("username").value;
        $.ajax({                    // 标准化模板，不用死记
            url:"/checkUsernameServlet",   // 请求路径
            type:"post",            // 请求的方式，不区分大小写
            async:true,             // 是否异步，true是默认值，false为同步请求
            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            data:{                  // 传递给后台参数名和参数值
                username:username
            },
            success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                console.log(response);
              let usernameMsg = document.getElementById("usernameMsg");
              if (response.code==200){
                  usernameMsg.innerHTML="<font color='green'>" + response.msg + "</font>";
              }
              else {
                  usernameMsg.innerHTML="<font color='red'>" + response.msg + "</font>";
              }
            },
            error:function(response){          // 如果请求失败，则会执行error函数
                alert("出错" + response);
            }
        });
    }
</script>
</html>